<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-11-12 16:16:57
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-19 16:15:52
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-11-12 16:16:57
-->
<template>
  <div class="flex">
    <a-button @click="handChange">城市选择</a-button>
    <a-picker v-model:visible="visible" :columns="columns"></a-picker>
    <a-button @click="handChanges">多级联动</a-button>
    {{ value }}
    <a-picker
      v-model:visible="visibles"
      v-model="value"
      cascade
      :columns="columnss"
    ></a-picker>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

const value = ref([]);

const visible = ref(false);
const visibles = ref(false);

function handChange() {
  visible.value = true;
}

function handChanges() {
  visibles.value = true;
}

onMounted(() => {
  setTimeout(() => {
    value.value[0] = 4;
  }, 3000);
});

const columns = ref([
  [{ text: "A" }, { text: "B" }, { text: "C" }, { text: "D" }, { text: "E" }],
  [{ text: "A" }, { text: "B" }, { text: "C" }, { text: "D" }, { text: "E" }],
  [{ text: "A" }, { text: "B" }, { text: "C" }, { text: "D" }, { text: "E" }],
]);

const columnss = ref([
  {
    text: "四川省",
    children: [
      {
        text: "成都市",
        children: [
          {
            text: "温江区",
          },
          {
            text: "青羊区",
          },
        ],
      },
    ],
  },
  {
    text: "江苏省",
    children: [
      {
        text: "无锡市",
        children: [
          {
            text: "新吴区",
          },
          {
            text: "滨湖区",
          },
        ],
      },
    ],
  },
]);
</script>

<style scoped>
.flex {
  padding: 100px 20px;
}

.picker-view {
  height: 400px;
}
</style>
